<template>
  <div class="login-box">
    <div class="login-form">
      <div class="login-top">
        <div class="login-logo">
          <img src="@/assets/img/logo.jpg" alt="" srcset="" />
        </div>
        <div class="login-title">
          {{ $t('login.title') }}
        </div>
      </div>
      <a-form :model="loginForm">
        <a-form-item>
          <a-input
            size="large"
            v-model:value="loginForm.username"
            :placeholder="$t('login.username')"
          >
            <template v-slot:prefix><UserOutlined /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input-password
            size="large"
            v-model:value="loginForm.password"
            :placeholder="$t('login.password')"
            autocomplete="off"
            @keyup.enter="onSubmit"
          >
            <template v-slot:prefix><LockOutlined /></template>
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-button class="login-btn" size="large" @click="onSubmit" block>
            {{ $t('login.logIn') }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="fly bg-fly-circle1"></div>
    <div class="fly bg-fly-circle2"></div>
    <div class="fly bg-fly-circle3"></div>
    <div class="fly bg-fly-circle4"></div>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'

export default defineComponent({
  setup() {
    const router = useRouter()
    const store = useStore()
    const redirect = ref(undefined)
    const otherQuery = ref({})
    const loginForm = ref({
      username: 'admin',
      password: 'admin'
    })
    const onSubmit = () => {
      store.dispatch('user/login', loginForm.value).then(() => {
        router.push({ path: redirect.value || '/', query: otherQuery.value })
      })
    }
    const getOtherQuery = (query) => {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
    const route = useRoute()
    watch(route, (route) => {
      const query = route.query
      if (query) {
        redirect.value = query.redirect
        otherQuery.value = getOtherQuery(query)
      }
    })
    return {
      loginForm,
      onSubmit
    }
  },
  components: { UserOutlined, LockOutlined }
})
</script>

<style lang="less" scoped>
.login-box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  .login-form {
    flex: 1;
    padding: 10% 10px;
    text-align: center;
    width: 400px;
    max-width: 100%;
    margin: 0 auto;
    .login-top {
      padding: 32px 0;
      .login-logo {
        img {
          width: 400px;
          max-width: 100%;
        }
      }
      .login-title {
        font-size: 14px;
        color: #808695;
      }
    }
    ::v-deep .ant-col {
      width: 100%;
    }
  }
  .login-btn{
    background-image: linear-gradient(to right, #48c6ef 0%, #6f86d6 100%);
    color: white;
    border: none;
  }
  .fly {
    pointer-events: none;
    position: fixed;
    z-index: 100;
  }
  .bg-fly-circle1 {
    left: 40px;
    top: 100px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(
      to right,
      rgba(100, 84, 239, 0.07) 0%,
      rgba(48, 33, 236, 0.04) 100%
    );
    animation: move 2.5s linear infinite;
  }

  .bg-fly-circle2 {
    left: 3%;
    top: 60%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(
      to right,
      rgba(100, 84, 239, 0.08) 0%,
      rgba(48, 33, 236, 0.04) 100%
    );
    animation: move 3s linear infinite;
  }

  .bg-fly-circle3 {
    right: 2%;
    top: 140px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: linear-gradient(
      to right,
      rgba(100, 84, 239, 0.1) 0%,
      rgba(48, 33, 236, 0.04) 100%
    );
    animation: move 2.5s linear infinite;
  }

  .bg-fly-circle4 {
    right: 5%;
    top: 60%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(
      to right,
      rgba(100, 84, 239, 0.02) 0%,
      rgba(48, 33, 236, 0.04) 100%
    );
    animation: move 3.5s linear infinite;
  }

  @keyframes move {
    0% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(25px);
    }

    100% {
      transform: translateY(0px);
    }
  }
}
</style>
